<template>
	<div class="screen-box">
		<div class="screen-item time-select">
			<!-- 时间 -->
			<div class="screen-title">时间</div>
			<van-cell value="实时" :class="{ active: timeType == '1' }" @click="timeSelect('1')" size="large" />
			<van-cell value="12h" :class="{ active: timeType == '12' }" @click="timeSelect('12')" size="large" />
			<van-cell value="24h" :class="{ active: timeType == '24' }" @click="timeSelect('24')" size="large" />
			<van-collapse v-model="activeNames" @change="(actNa) => timeSelect('0')">
				<van-collapse-item title="自定义" name="1" :class="{ active: timeType == '0' }">
					<div>
						<van-field v-model="formatDate1" is-link readonly label="开始时间" @click="timeshow1 = true" />
						<van-popup v-model="timeshow1" :style="{ height: '60%' }" round position="bottom">
							<van-datetime-picker v-model="currentDate1" type="datetime" @confirm="choiceTime1" @cancel="timeshow1 = false" title="开始时间" :min-date="minDate1" :max-date="maxDate1" />
						</van-popup>
					</div>
					<div>
						<van-field v-model="formatDate2" is-link readonly label="结束时间" @click="timeshow2 = true" />
						<van-popup v-model="timeshow2" :style="{ height: '60%' }" round position="bottom">
							<van-datetime-picker v-model="currentDate2" type="datetime" @confirm="choiceTime2" @cancel="timeshow2 = false" title="结束时间" :min-date="minDate2" :max-date="maxDate2" />
						</van-popup>
					</div>
				</van-collapse-item>
			</van-collapse>
		</div>
		<div class="screen-item place-select">
			<div class="screen-title">区划</div>
			<van-field v-model="placeValue" is-link readonly label="" placeholder="请选择所在地区" active-color="#1989fa" @click="placeShow = true" />
			<van-popup v-model="placeShow" round position="bottom">
				<van-picker show-toolbar :columns="placeOptions" @cancel="placeShow = false" @confirm="placeSele" />
			</van-popup>
		</div>
		<div class="screen-item type-select">
			<div class="screen-title">类型</div>
			<van-field v-model="typeValue" is-link readonly label="" placeholder="请选择类型" active-color="#1989fa" @click="typeShow = true" />
			<van-popup v-model="typeShow" round position="bottom">
				<van-picker show-toolbar :columns="typeOptions" @cancel="typeShow = false" @confirm="typeSele" />
			</van-popup>
		</div>
		<div class="finish-button" @click="finishScreen">完成</div>
	</div>
</template>

<script>
import openLink from 'gdt-jsapi/openLink'
export default {
	name: 'Screen',
	// computed: {
	// minDate2() {
	// 	return this.formatDate1 && this.formatDate1 != '' ? new Date(this.formatDate1) : new Date(2020, 0, 1)
	// }
	// maxDate1() {
	// 	return this.formatDate2 && this.formatDate2 != '' ? new Date(this.formatDate2) : new Date()
	// }
	// },
	data() {
		return {
			timeType: '1', // 时间类型
			activeNames: [],
			timeshow1: false,
			minDate1: new Date(2020, 0, 1),
			maxDate1: new Date(),
			currentDate1: new Date(),
			formatDate1: '',
			timeshow2: false,
			minDate2: new Date(2020, 0, 1),
			maxDate2: new Date(),
			currentDate2: new Date(),
			formatDate2: '',

			placeValue: '全部',
			placeShow: false,
			placeOptions: [
				'全部',
				'海口市',
				'万宁市',
				'陵水黎族自治县',
				'乐东黎族自治县',
				'五指山市',
				'定安县',
				'琼中黎族苗族自治县',
				'文昌市',
				'三亚市',
				'琼海市',
				'屯昌县',
				'儋州市',
				'白沙黎族自治县',
				'昌江黎族自治县',
				'澄迈县',
				'保亭黎族苗族自治县',
				'东方市',
				'临高县',
				'三沙市'
			],

			typeValue: '全部',
			typeShow: false,
			typeOptions: ['全部', '森林', '农田及自然植被', '草地', '城市或荒漠', '灌木'],
			fireAllInfo: null // 火点数据
		}
	},
	mounted() {
		document.title = '火情筛选'
	},
	methods: {
		finishScreen() {
			if (this.timeType == '0') {
				if (this.formatDate1 == '' || this.formatDate2 == '') {
					return false
				}
				if (this.currentDate1 > this.currentDate2) {
					return
				}
			}
			// let hour = encodeURI(this.timeType)
			// let startTime = encodeURI(this.timeType == '0' ? this.formatDate1 : '')
			// let endTime = encodeURI(this.timeType == '0' ? this.formatDate2 : '')
			// let stype = encodeURI(this.typeValue == '全部' ? '' : this.typeValue)
			// let region = encodeURI(this.placeValue == '全部' ? '' : this.placeValue)
			let queryObj = {
				hour: this.timeType,
				startTime: this.timeType == '0' ? this.formatDate1 : '',
				endTime: this.typeValue == '全部' ? '' : this.typeValue,
				stype: this.typeValue == '全部' ? '' : this.typeValue,
				region: this.placeValue == '全部' ? '' : this.placeValue
			}
			this.$emit('screenQuery', queryObj)
			// openLink({
			// 	url: `${window.selfURL}fire?appId=huoqing-e9Zlo4q8P45M47CrnaeERj&type=1&hour=${hour}&pageNum=1&startTime=${startTime}&endTime=${endTime}&stype=${stype}&region=${region}`
			// }).then((res) => {
			// 	console.log(res)
			// })
		},
		// 时间选择
		timeSelect(value) {
			this.timeType = value
			if (value !== '0') {
				this.activeNames = []
			}
		},
		placeSele(val) {
			this.placeShow = false
			this.placeValue = val
		},
		typeSele(val) {
			this.typeShow = false
			this.typeValue = val
		},
		// 自定义时间确定
		choiceTime1() {
			this.timeshow1 = false
			this.formatDate1 = this.formattingDate(this.currentDate1)
		},
		choiceTime2() {
			this.timeshow2 = false
			this.formatDate2 = this.formattingDate(this.currentDate2)
		},
		formattingDate(val) {
			let date = new Date(val)
			let y = date.getFullYear()
			let m = date.getMonth() + 1
			m = m < 10 ? '0' + m : m
			let d = date.getDate()
			d = d < 10 ? '0' + d : d
			let h = date.getHours()
			h = h < 10 ? '0' + h : h
			let s = date.getMinutes()
			s = s < 10 ? '0' + s : s
			let z = date.getSeconds()
			z = z < 10 ? '0' + z : z
			return y + '-' + m + '-' + d + ' ' + h + ':' + s + ':' + z
		}
	}
}
</script>

<style lang="scss">
.screen-box {
	height: 100vh;
	background: #f4f4f4;
	position: relative;
	z-index: 1;
	text-align: left;
	.screen-item {
		.screen-title {
			height: 0.8rem;
			font-size: 0.28rem;
			font-weight: 550;
			color: #1f1f1f;
			line-height: 0.8rem;
			padding-left: 0.32rem;
		}
		.active {
			span {
				color: #3296fa;
			}
		}
	}
	.finish-button {
		width: calc(100% - 0.64rem);
		height: 0.88rem;
		background: #3296fa;
		border-radius: 0.08rem;
		position: absolute;
		bottom: 0.4rem;
		left: 0.32rem;
		font-size: 0.34rem;
		text-align: center;
		color: #ffffff;
		line-height: 0.88rem;
	}
}
</style>